<template>

       <headerVue></headerVue>
       <navSwiper></navSwiper>
        <div ref="target">
       <NewGoodCourse v-if="targetIsVisible"></NewGoodCourse>
        </div>
        <Foot></Foot>

</template>

<script setup>
import { useIntersectionObserver } from '@vueuse/core'
import headerVue from '../components/header.vue';
import navSwiper from '../components/home/NavSwiper.vue';
import Foot from '../components/home/Foot.vue';

const target = ref(null);
const targetIsVisible = ref(false);

const NewGoodCourse = defineAsyncComponent(() =>
  import('../components/home/NewGoodCourse.vue')
)
const { stop } = useIntersectionObserver(
  target,
  ([{ isIntersecting }]) => {
  	if( isIntersecting ) {
  		targetIsVisible.value = isIntersecting
  	}
  },
)
</script>

<style lang="scss" scoped> 

</style>